

<template>
    <!-- vue2 和vue3的区别 -->
     <!-- 1.vue2采用的是配置项api,vue3 是组合式api  -->

  <!-- vue3 的template 无需 根元素div包裹 -->
    <h1>数据：{{count}}</h1>
    <h1>计算属性：{{countDou}}</h1>
   <button @click="toCount">加 1</button>
     <hr>
  <mouse-move></mouse-move>
    <hr>
  <hello-world></hello-world>

</template>
<script >
import helloWorld from '../../components/HelloWorld.vue'
import mouseMove from '../../components/mouseMove.vue'
  export default {
    components:{helloWorld,mouseMove},
    data(){ //ref reactive
      return {
        count:1,
        kk:1
      }
    },
    methods:{ // 普通的箭头函数
      toCount(){
        this.count++
      },
      hh(){}
    },
    computed:{ //computed
      countDou(){
        return this.count*2
      },
      myhh(){

      }
    },
    watch:{
      myhh(){

      }
    },
    mounted() {
      
    },
  }

</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
